<template>
  <div class="live-bg" style="display: flex;flex-direction:column;">
    <img src="../../assets1/er/pc/homeTop.png" style="width: 100%;">
    <div style="display: flex;justify-content: center;align-items: flex-start;height: 100%;overflow: hidden;">
      <van-row style="width: 70%;height: 70%;">
        <van-col style="width: calc(100% - 30% - 30px);height: 100%;padding: 0 30px 0 0;">
          <div class="livevideo" style="height: 100%;">
            <videoPlayer ref="video" :isPhone="$store.state.isMobile" :wWidth="videoWidth" :wHeight="wHeight" @questionnaireTypeFun="questionnaireType = true"></videoPlayer>
          </div>
        </van-col>
        <van-col style="width: 30%;height: 100%;">
          <div class="msgstyle" ref="news" style="height: 100%;width: 100%;">
            <Message :msgHeight="msgHeight" :msgWidth="msgWidth" :isPhone="$store.state.isMobile"></Message>
          </div>
        </van-col>
      </van-row>
      <!--    <returnIndex :isPhone="$store.state.isMobile"></returnIndex>-->
      <!--    <returnDay :isPhone="$store.state.isMobile"></returnDay>-->

      <van-popup v-model="questionnaireType" closeable round style="width: 400px;" class="_wz_pc_van-popup"  :close-on-click-overlay="false">
        <questionnaireInvestigation></questionnaireInvestigation>
      </van-popup>



      <returnIndex :isPhone="$store.state.isMobile" :state="true" style="position: absolute;"></returnIndex>
    </div>

  </div>
</template>
<script>
import Message from "@/components/Message.vue";
import returnIndex from "@/components/return.vue";
import returnDay from "@/components/returnDay.vue";
import videoPlayer from "@/components/videoPlayer.vue";
import questionnaireInvestigation from "./../questionnaireInvestigation.vue";
export default {
  components: {
    videoPlayer, //直播控件
    Message, //消息
    returnIndex,//返回首页
    returnDay,//跳转会议
    questionnaireInvestigation,//问卷弹框
  },
  data() {
    return {
      msgHeight: 300,
      msgWidth: 400,
      wHeight: 500,
      videoWidth: 200,
      liveInfo: "",

      userData:{},
      studyTime:null,//学习定时
      questionnaireType:false,//问卷弹框
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态
    let that = this;
    window.addEventListener("resize", that.getHeight);

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    //手机功能
    let that = this;
    var allHeight = document.documentElement.clientHeight;
    that.msgWidth = that.$refs.news.clientWidth;
    that.videoWidth = document.documentElement.clientWidth - that.$refs.news.clientWidth;
    that.wHeight = allHeight;
    that.msgHeight = allHeight - 110;


    // /*
    // * 此处需要获取用户数据
    // * 定时1分钟 向后台请求一次
    // * 如果30分钟后 执行弹框
    // *
    // * */
    // //判断用户是否登录
    // if (!localStorage.getItem("userData")) {
    //   // that.$refs.peoplePopup.open(that.$store.state.isMobile);
    // } else {
    //   that.userData = JSON.parse(localStorage.getItem("userData"))
    //
    //   that.studyTime = setInterval(function(){
    //     console.log('1分钟 向后台请求一次')
    //     console.log('在把用户的学习时长 +1，然后在存储到浏览器里面')
    //
    //     // 在把用户的学习时长 +1，然后在存储到浏览器里面
    //     that.http.forumAddTime({userId:that.userData.userId}).then(res => {
    //       if (res.status == 1000) {
    //         //学习时长
    //         that.userData.minute = parseInt(that.userData.minute) + 1;
    //         localStorage.setItem("userData", JSON.stringify(that.userData));
    //         if(that.userData.minute == 3 * 60){//两个小时后 弹框
    //           that.questionnaireType = true;
    //         }
    //
    //       }else{
    //         // that.$toast.fail({duration:5000,message:res.data.message,closeOnClick:true})
    //       }
    //     }).catch(err => {
    //       that.$toast.clear();
    //     });
    //
    //   },60 * 1000)
    //
    // }
  },
  methods: {//执行的方法
    getHeight() {
      let that = this;
      var allHeight = document.documentElement.clientHeight;
      that.videoWidth = document.documentElement.clientWidth - that.$refs.news.clientWidth;
      that.msgWidth = that.$refs.news.clientWidth;
      that.wHeight = allHeight;
      that.msgHeight = allHeight - 110;
    },
    //进入首页
    enter(flag) {
      let that = this;
      that.$router.replace("/");
    }
  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态
    clearInterval(this.studyTime);
    window.removeEventListener("resize",this.getHeight);

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>

<style lang="scss" scoped>
.live-bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url(../../assets1/er/pc/homeBack.png);
  background-size: cover;
  background-position: center;
}
.msgstyle {
  float: right;
}


</style>
<style lang="scss">
._wz_pc_van-popup{
  background: none!important;
  .van-popup__close-icon--top-right{
    top: 25px;
    right: 25px;
  }
}
</style>
